<template>
  <view class="container">
    <view class="history-title">历史记录</view>
    <view v-if="historyList.length === 0" class="no-history">
      <text>暂无历史记录</text>
    </view>
    <view v-for="(item, index) in historyList" :key="index" class="history-item">
      <image :src="'http://127.0.0.1:8080/images/' + item.fileName" class="history-image" />
      <view class="recognition-result">{{ item.recognitionResult }}</view>
    </view>

    <button @click="goBack" class="back-button">返回</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      historyList: [],  // 存储历史记录
    };
  },
  onLoad() {
    this.fetchHistory();  // 页面加载时请求历史记录
  },
  methods: {
    // 获取历史记录
    fetchHistory() {
      uni.request({
        url: 'http://127.0.0.1:8080/api/image/history',  // 获取历史记录接口
        method: 'GET',
        success: (res) => {
          this.historyList = res.data;
        },
        fail: (err) => {
          console.error('获取历史记录失败:', err);
        }
      });
    },

    // 返回按钮
    goBack() {
      uni.navigateBack();  // 返回上一个页面
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.history-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.history-item {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.history-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.recognition-result {
  font-size: 14px;
  color: #333;
  margin-top: 10px;
}

.back-button {
  margin-top: 30px;
  padding: 10px;
  font-size: 16px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}

.back-button:hover {
  background-color: #005bb5;
}
</style>
